<template>
    <div class="design-item">
        <div class="design-item-controller">
            <div class="design-item-controller-handle">

                <div class="design-component-off-shop-preview " v-if="!isEmpty">
                    <div class="offline-shop-info-header">
                        <div class="offline-shop-info-swipe">
                            <div class="swiper-container" >
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide" v-for="(item , index ) in chainLogoList">
                                        <div class="background-center" :style="{backgroundImage: 'url('+item+')' ,  backgroundSize: 'cover', backgroundPosition: 'center center'}"></div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="offline-shop-info-body">
                        <div :class="['offline-shop-info-logo-wrap' , 'offline-shop-info-logo-wrap-'+ (showMethod == 0 ? 'left' : showMethod==1 ? 'center' :'right' )]"
                             :style="{backgroundImage: 'url('+chainAvatarUrl+')' , backgroundSize: 'cover', backgroundPosition: 'center center'}"></div>
                        <div class="offline-shop-info-detail van-hairline-bottom">
                            <h3 class="offline-shop-info-shop-name">{{chainName}}</h3><a href="tel:" class="offline-shop-info-tel"><i></i></a></div>
                        <div class="offline-shop-info-address"><i class="offline-shop-info-info-icon info-icon-map-marker"></i>
                            <p class="offline-shop-info-address-detail">{{chainAddress}}</p><i class="offline-shop-info-address-arrow"></i></div>
                        <div class="offline-shop-info-open-time"><i class="offline-shop-info-info-icon info-icon-clock"></i>{{chainTime}}
                        </div>
                    </div>
                </div>
                <div class="design-default-preview" v-if="isEmpty">
                    <div class="design-default-preview-title">当前还没选择门店</div>
                    <div class="design-default-preview-tip">请先选择门店</div>
                </div>
            </div>
            <slot name="menu"></slot>
        </div>
        <div class="design-item-editor" v-show="show && !showAddMenuGroup">
            <div>
                <div class="design-item-editor-title">进入店铺</div>
                <div class="editor-group">
                    <div class="editor-group-label">显示位置：</div>
                    <div class="editor-group-control">
                        <label :class="['nc-radio-wrap',{'nc-radio-checked' : showMethod == 0 }]" @click="showMethod = 0"><span class="nc-radio"><span class="nc-radio-inner"></span></span><span>居左</span></label>
                        <label :class="['nc-radio-wrap',{'nc-radio-checked' : showMethod == 1 }]" @click="showMethod = 1"><span class="nc-radio"><span class="nc-radio-inner"></span></span> <span>居中</span></label>
                        <label :class="['nc-radio-wrap',{'nc-radio-checked' : showMethod == 2 }]" @click="showMethod = 2"><span class="nc-radio"><span class="nc-radio-inner"></span></span> <span>居右</span></label>
                    </div>
                </div>
                <div class="editor-group">
                    <div class="editor-group-label editor-group-label-top">显示位置：</div>
                    <div class="editor-group-control">
                        <div class="editor-store-edit">
                            <span class="editor-store-title" v-if="!isEmpty">{{chainName}}</span>
                            <span class="editor-store-text" @click="bindModifyShop">{{isEmpty ? '添加' : '修改'}}</span>
                        </div>
                        <div class="editor-help-desc">展示门店地址、营业时间、门店照片等信息</div>
                        <div><a href="JavaScript:;" @click="bindNavigateToChain">进入实体店铺管理</a></div>
                    </div>
                </div>


            </div>
        </div>
        <slot name="addMenuGroup" v-if="showAddMenuGroup"></slot>
    </div>
</template>
<script>
    import '@/assets/styles/swiper.min.scss'
    /**
     * 实体店选择组件
     */
    var defaultDataFormat = {
        // logo 显示位置
        showMethod: 0,
        // 店铺id
        chainId: 0,
        // 店铺名称
        chainName: '',
        // 店铺地址
        chainAddress: '',
        // 店铺营业时间
        chainTime: '',
        // 店铺logo 多张用,分割
        chainLogo: '',
        // 店铺logo图片列表
        chainLogoList: [],
        //店铺头像
        chainAvatar:'' ,
        // 店铺头像
        chainAvatarUrl:'',
        //imsg
        type: 'offlineShop',

        isEmpty: true
    }
    export default {
        name: "nc-design-item-off-line-shop",
        otherInfo: {
            title: '实体店铺',
            type: 'offlineShop',
            group: 2,
            max: 0
        },
        //外部传入参数
        props: {
            show: {
                type: Boolean,
                default: false
            },
            options: {
                type: Object,
                default: null
            },
            cid: {
                type: Number
            },
            showAddMenuGroup: {
                type: Boolean,
                default: false
            }
        },
        /*
         * 自身数据,一定要一个function
         */
        data() {
            let data = !Nc.isEmpty(this.options) ? {

                showMethod: this.options.showMethod,
                // 店铺id
                chainId: this.options.chainId,
                // 店铺名称
                chainName: this.options.chainName,
                // 店铺地址
                chainAddress: this.options.chainAddress,
                // 店铺营业时间
                chainTime: this.options.chainTime,
                // 店铺logo 多张用,分割
                chainLogo: this.options.chainLogo,
                // 店铺logo图片列表
                chainLogoList: this.options.chainLogoList,
                chainAvatar: this.options.chainAvatar ,
                chainAvatarUrl : this.options.chainAvatarUrl,
                type: this.options.type,
                isEmpty: false,

            } : ($.extend(true, {}, defaultDataFormat))

            let customData = {}
            return $.extend({}, data, customData)
        },
        computed: {
            defaultImage(){
                return ncGlobal.imgRoot + 'default_image.png'
            }
        },

        methods: {
            /**
             * 获取当前数据
             */
            getCurrentData () {
                return {
                    showMethod: this.showMethod,
                    // 店铺id
                    chainId: this.chainId,
                    // 店铺名称
                    chainName: this.chainName,
                    // 店铺地址
                    chainAddress: this.chainAddress,
                    // 店铺营业时间
                    chainTime: this.chainTime,
                    // 店铺logo 多张用,分割
                    chainLogo: this.chainLogo,
                    
                    chainAvatar : this.chainAvatar,
                    type: this.type
                }
            },
            /**
             * 点击跳转到实体店管理页面
             */
            bindNavigateTochain(){
                window.open(ncGlobal.adminRoot + 'chain/list')
            },
            /**
             * 点击显示选择实体店对话框
             */
            bindModifyShop(){
                var self = this,
                    current = {
                        chainId: self.chainId,
                        chainName: self.chainName,
                        chainAddress: self.chainAddress,
                        chainTime: self.chainTime,
                        chainLogo: self.chainLogo,
                        chainLogoList: self.chainLogoList,
                        chainAvatar:self.chainAvatar,
                        chainAvatarUrl :self.chainAvatarUrl
                    }
                Nc.openStore({
                    current:current,
                    pageSize:8
                }, function (chain) {
                    debugger
                    self.chainId = chain.chainId
                    self.chainName = chain.chainName
                    self.chainAddress = chain.chainAddress
                    self.chainTime = chain.chainTime
                    self.chainLogo = chain.chainLogo
                    self.chainLogoList = chain.chainLogoList
                    self.chainAvatar = chain.chainAvatar
                    self.chainAvatarUrl = chain.chainAvatarUrl
                    self.isEmpty = false
                })
            }
        }
    };
</script>